<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>19钩子函数</title>
  </head>
  <body>
    <div id="app">
      <h3>{{msg}}</h3>
      <button @click="num--">-</button>
      <span>{{num}}</span>
      <button @click="num++">+</button>
    </div>

    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>

    <script>
      const app = new Vue({
        el: "#app",
        data: {
          msg: "计数器",
          num: 100,
        },
        beforeCreate() {
          console.log("beforeCreate 响应式数据响应之前",this.num);
        },
        created() {
          console.log("created 响应式数据响应之后",this.num);
        },
        beforeMount() {
          console.log("beforeMount 模板挂载之前",document.querySelector("#app").innerHTML);
        },
        mounted() {
          console.log("mounted 模板挂载之后",document.querySelector("#app").innerHTML);
        },
        //修改数据才触发   数据修改了视图没更新
        beforeUpdate(){
          console.log("beforeUpdate 数据修改了视图没更新",document.querySelector("span").innerHTML);
        },
        // 数据修改了 视图更新了
        updated(){
          console.log("update  数据修改了 视图更新了",document.querySelector("span").innerHTML);
        },
        //卸载阶段 卸载之前
        beforeDestroy(){
          console.log("beforeDestroy 卸载之前");
          console.log('清除掉一些Vue以外的资源占用，定时器，延时器。。。');    
        },
        //卸载阶段  卸载之后
        destroyed(){
          console.log("destroyed 卸载之后");
        },
        watch: {
          num: {
            deep: true,
            handler(newValue) {
              console.log("num值发生了变化,值为",newValue);
            },
          },
        },
      });
    </script>
  </body>
</html>
